<template>
  <div>
    <top/>

    <div id="writing-text">

      <div id="content">
        <textarea v-model="title" @change="updateNum(1)" ref="title" class="title" maxlength="60" rows="2" placeholder="在这里输入标题"/>
        <textarea v-model="content" @change="updateNum(2)" ref="content" class="content" maxlength="10000" placeholder="在这里输入内容" />
      </div>

      <div id="extra-info">
        <div class="tip">文章标签：</div>
        <div class="enter"><input type="text" placeholder="SpringBoot" v-model="tag"></div>

        <div class="tip">文章类型：</div>
        <div class="enter">
          <select name="category">
            <option value="1" v-model="is_original">原创</option>
            <option value="2" v-model="is_original">转载</option>
            <option value="3" v-model="is_original">翻译</option>
          </select>
        </div>

        <div class="tip">公开形式：</div>
        <div class="enter">
          <input type="radio" name="public" value="1" v-model="is_public" checked>&nbsp;<span>公开</span>
          <input type="radio" name="public" value="2" v-model="is_public">&nbsp;<span>私密</span>
          <input type="radio" name="public" value="3" v-model="is_public">&nbsp;<span>粉丝可见</span>
          <input type="radio" name="public" value="4" v-model="is_public">&nbsp;<span>VIP可见</span>
        </div>
      </div>

    </div>

    <div id="submit">
      <div>标题:&nbsp;{{titleNum}} &emsp; 正文:&nbsp;{{contentNum}}</div>
      <div @click="submit">发布博客</div>
    </div>

    <copyright/>
  </div>
</template>

<script>
import top from "../base/top";
import copyright from "../base/copyright";
import axios from "axios";
import {ip} from "../../data/ip"
export default {
  name: "write",
  components:{top,copyright},
  data(){
    return{
      titleNum:0,
      contentNum:0,

      title: "",
      content: "",
      is_public: "1",
      is_original: "1",
      tag: ""
    }
  },
  mounted(){
  },
  methods:{
    updateNum(order){
      if(order===1){
        this.titleNum = this.$refs.title.value.length
      }
      else{
        this.contentNum = this.$refs.content.value.length
      }
    },//updateNum

    submit(){
      axios({
        url: ip + "/api/save-article",
        method:"get",
        params:{
          userId: window.sessionStorage.getItem("userId"),
          title:this.title,
          content:this.content,
          tag: this.tag,
          isOriginal: parseInt(this.is_original),
          isPublic: parseInt(this.is_public)
        }
      }).then(res=>{
        alert("注册成功！")
      }).catch(err=>{
        alert("注册失败！")
      })
      // location.reload()
    }
  }
}
</script>

<style scoped>
#writing-text{
  width:100%;
  padding-top:20px;
  padding-bottom: 20px;
}
#writing-text > div{
  width:60%;
  margin:0 auto 10px;
  box-shadow: 1px 1px 2px 2px #D7DADB;
}

/*  文章内容和标题  */
#content{
  width:100%;
  padding:20px;
}

#content textarea{
  display: block;
  outline:none;
  border:none;
  border-bottom: 1px solid #D7DADB;
  width:100%;
}
#content textarea.title{
  height:80px;
  line-height: 40px;
  font-size:24px;
  font-weight: 1000;
  margin-bottom: 18px;
}
#content textarea.content{
  min-height:600px;
  line-height: 30px;
  font-size:20px;
}

/* 分类，权限，标签 */
#extra-info{
  width:100%;
  padding:40px;

  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-items: start;
}
#extra-info > div{
  height:50px;
  line-height:50px;
  color:#2C3E50;
}
#extra-info .tip{
  width:20%;
  text-align: right;
  padding-right:40px;
}
#extra-info .enter{
  width:78%;
}

#extra-info .enter input[type='text']{
  width:100px;
  height:30px;
  font-size:16px;
  color:#2C3E50;
  outline:none;
}
#extra-info .enter input[type='text']:focus{
  outline:none;
  box-shadow: 1px 1px 1px 1px #6DBCDB,
              -1px -1px 1px 1px #6DBCDB;
  border:1px solid #D7DADB;
}

/* 单选按钮 */
#extra-info input[type='radio']{
  width:20px;
}

#extra-info .enter span{
  margin-right:20px;
}

/* 下拉列表 */
#extra-info select{
  width:100px;
  height:30px;
  outline:none;
  color:#2C3E50;
}
#extra-info select:focus{
  outline:none;
  box-shadow: 1px 1px 1px 1px #6DBCDB,
  -1px -1px 1px 1px #6DBCDB;
  border:1px solid #D7DADB;
}

/* 提交 */
#submit{
  width:60%;
  margin:10px auto;
  color:#2C3E50;
  height:40px;
  line-height: 40px;
}
#submit > div:first-child{
  float:left;
}
#submit > div:last-child{
  float:right;

  background-color: #FC4349;
  height:40px;
  padding:5px 20px;
  line-height: 30px;
  border-radius: 20px;
  color:white;
  cursor:pointer;
}
</style>
